<template>
  <div class="home container">
    <div class="bg"></div>
    <div class="header">
      <img class="avatar" :src="joinUrlImg(INFO.user_avatar)" alt="" />
      <div class="container_user_info flex_column">
        <div class="name">Hello,{{ INFO.nickname }}</div>
        <div class="text">欢迎使用健康云联心理平台！</div>
      </div>
      <!-- @click="$router.push('/messageList')" -->
      <div class="message">
        <img src="@/assets/images/home/message.png" alt="" />
        <!-- <div class="red_dot"></div> -->
      </div>
      <img src="@/assets/images/home/hi.png" class="hi" alt="" />
    </div>
    <div class="banner">
      <van-swipe indicator-color="#00aeff" class="my-swipe" :autoplay="5000">
        <van-swipe-item>
          <img
            src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""
          />
        </van-swipe-item>

        <van-swipe-item>
          <img
            src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="fn_list flex_row">
      <div
        class="item flex_column"
        v-for="(item, index) in fnList"
        @click="$router.push(item.routerPath)"
        :key="index"
      >
        <div
          :style="{ backgroundColor: item.bgColor }"
          class="icon father_relative flex_center"
        >
          <div class="dot"></div>
          <img :src="item.icon" alt="" />
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>

    <!-- 热门测评 -->
    <div class="consult flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">热门测评</div>
      <div class="more" @click="$router.push('/onlineConsultation')">
        更多>>
      </div>
    </div>
    <div class="evaluation_box common_box">
      <div
        v-for="(item, index) in 2"
        :key="index"
        class="item-evaluation dis_flex justify_center"
      >
        <div class="left_box dis_flex">
          <img src="" alt="" class="cover_img" />
          <div class="">
            <div class="left_title">谁在你的心里是最重要的呢？</div>
            <div class="dis_flex">
              <img src="" alt="" class="hot_img" />
              <span class="num">28634人测过</span>
            </div>
          </div>
        </div>
        <img src="" alt="" class="arrow_img" />
      </div>
    </div>

    <!-- 心灵放松 -->
    <div class="consult flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">心灵放松</div>
      <div class="more" @click="$router.push('/onlineConsultation')">
        更多>>
      </div>
    </div>
    <div class="relax_box common_box">
      <div class="music_info">
        <div class="music_desc">
          <div class="name">推荐音乐:星星在唱歌</div>
          <div class="text">心理音乐</div>
        </div>
        <img
          src="~@/assets/images/home/pause-icon.png"
          alt=""
          class="pause-img"
        />
        <!-- <img src="" alt="" class=""> -->
      </div>
      <div class="sort_info dis_flex justify_center">
        <div v-for="(item, index) in 2" :key="index" class="item-sort">
          <img src="" alt="" class="sort-picture" />
          <div class="item-tit item_pad">怎样完成一只小兔子...</div>
          <div class="dis_flex item_pad">
            <span class="sort-tit">心理视频</span>
            <img
              src="~@/assets/images/home/double_right_arrow.png"
              alt=""
              class="right-arrow"
            />
          </div>
        </div>
      </div>

      <div class="sort_info dis_flex justify_center">
        <div
          v-for="(item, index) in 2"
          :key="index"
          class="item-sort vertical-sort dis_flex"
        >
          <img src="" alt="" class="vertical-picture" />
          <div>
            <div class="item-tit item_pad">怎样完成一只小兔子...</div>
            <div class="dis_flex item_pad">
              <span class="sort-tit">心理视频</span>
              <img
                src="~@/assets/images/home/double_right_arrow.png"
                alt=""
                class="right-arrow"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="sort_info dis_flex justify_center">
        <div v-for="(item,index) in 2" :key="index" class="item-sort">
          <img src="" alt="" class="sort-picture vertical-picture">
          <div class="item-tit item_pad">怎样完成一只小兔子...</div>
          <div class=" dis_flex item_pad">
            <span class="sort-tit">心理视频</span>
           <img src="~@/assets/images/home/double_right_arrow.png" alt="" class="right-arrow">
          </div>
        </div>
      </div>
    </div> -->
    <!-- 心灵智慧树 -->
    <div class="consult flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">心灵智慧树</div>
      <div class="more" @click="$router.push('/onlineConsultation')">
        更多>>
      </div>
    </div>
    <div class="wisdom_tree_box">
      <div class="item-tree" v-for="(item, index) in 2" :key="index">
        <img src="" alt="" class="head_portrait" />
        <div class="tree-info">
          <div class="nickname">入城的安眠曲</div>
          <div class="time">2024-11-15 14:26:54</div>
          <div class="content">
            所说加班的人后来都变成了单身狗，不理解其中的奥秘，有老师能解答我的疑惑吗？
          </div>
          <div class="img_box">
            <img
              src=""
              alt=""
              v-for="(item, index) in 3"
              :key="index"
              class="user_img"
            />
          </div>

          <div class="play_box dis_flex">
            <img
              src="@/assets/images/home/pause_icon.png"
              alt=""
              class="play_icon"
            />
            <div class="line"></div>
            <div class="progress_bar">
              <div class="file_bar" :style="{ width: progress + '%' }"></div>
              <div
                class="sliding_block"
                :style="{ left: progress + '%' }"
              ></div>
            </div>
            <div class="progress_time">00:10:26</div>
          </div>

          <div class="operation_box dis_flex justify_center">
            <div class="dis_flex">
              <img src="@/assets/images/home/collect.png" alt="" />
              <span>5人收取过</span>
            </div>
            <div class="dis_flex">
              <img src="@/assets/images/home/like.png" alt="" />
              <span>点赞2次</span>
            </div>
            <div class="dis_flex">
              <img src="@/assets/images/home/comment.png" alt="" />
              <span>2条评论</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-tips">已经到底啦～</div>

    <!-- 自评弹窗 -->

    <van-popup v-model="showPicker" round position="center">
      <div class="evaluate_pop">
        <img
          src="@/assets/images/home/evaluate_pop_img.png"
          alt=""
          class="pop_bg"
        />
        <div class="txt">自我评价</div>
        <div class="tips">
          请定时进行自我评价，可以让管理员更清晰了解你最近的基本状况
        </div>
        <div class="btn">开始自评</div>
        <img
          src="@/assets/images/home/close_icon.png"
          alt=""
          class="close_img"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { joinUrlImg } from "@/utils/setUrlImg";
import { mapState, mapMutations } from "vuex";
import { apiCounselorList } from "@/api/consult";

import { getToken } from "@/api/user";
let timer = null;
export default {
  data() {
    return {
      showPicker: false,
      // 功能列表
      fnList: [
        {
          icon: require("@/assets/images/home/1.png"),
          text: "线上咨询",
          bgColor: "#01aefe",
          read: 0,
          routerPath: "/onlineConsultation",
        },
        {
          icon: require("@/assets/images/home/2.png"),
          text: "个人自评",
          bgColor: "#29cca6",
          read: 0,
          routerPath: "/selfAssessment/1/0",
        },
        {
          icon: require("@/assets/images/home/3.png"),
          bgColor: "#ff9500",
          text: "危机上报",
          read: 0,
          routerPath: "/crisisReport",
        },
        {
          icon: require("@/assets/images/home/4.png"),
          bgColor: "#00ccff",
          text: "普通测评",
          read: 0,
          routerPath: "/nav/evaluation",
        },
      ],
      // 任务列表
      taskList: [],
      // 咨询师列表
      counselorList: [],
      // 当前导航
      currentNav: 0,
      // 测评设置
      setting: "",
    };
  },

  created() {},
  async mounted() {
    // this.SET_TIMER(
    //   setInterval(async () => {
    //     const { data } = await getToken({ uid: this.INFO.id });
    //     if (data.code == 200) {
    //       let oldToken = sessionStorage.getItem("token");
    //       if (oldToken != data.data) {
    //         clearInterval(this.TIMER);
    //         this.CLEAR_INFO();
    //         this.$toast.fail("账号被其他人登录！");
    //         this.$router.push(localStorage.getItem("loginPage"));
    //       }
    //     }
    //   }, 5000)
    // );
  },
};
</script>

<style lang="less" scoped>
// @import "./css/index.less";

.common_box {
  background: #ffffff;
  border-radius: 7px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.justify_center {
  justify-content: space-between;
}

//智慧树
.wisdom_tree_box {
}

.wisdom_tree_box .item-tree {
  display: flex;
  background-color: #ffffff;
  border-radius: 5px;
  margin-bottom: 6px;
  padding: 13.33px 16.67px 17.67px 10px;
}

.wisdom_tree_box .item-tree .head_portrait {
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border-radius: 50%;
  background-color: red;
}

.tree-info {
  color: #333333;
}

.tree-info .nickname {
  font-size: 15px;
}

.tree-info .time {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 10px;
}

.tree-info .content {
  font-size: 13px;
  margin: 20px 0 16px;
}

.tree-info .img_box {
  width: 100%;
  height: 82px;
}

.tree-info .img_box .user_img {
  width: 82px;
  height: 82px;
  border-radius: 5px;
  margin-right: 13px;
  background-color: red;
}

.tree-info .img_box .user_img:last-child {
  margin: 0;
}

//播放
.play_box {
  width: 100%;
  height: 30px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin: 10px 0 20.33px;
  padding: 0 10px;
}

.play_box .play_icon {
  width: 18px;
  height: 18px;
}

.line {
  width: 0.33px;
  height: 19px;
  opacity: 0.3;
  background: #777777;
  margin: 0 6.67px;
}

.progress_bar {
  position: relative;
  width: 150px;
  height: 6px;
  background: #c2efff;
  border-radius: 3px;
}

.file_bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #0eaeff 0%, #0eaeff 100%);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.sliding_block {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 6px;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    #0eaeff;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0) inset;
  transition: left 0.1s linear;
}

.progress_time {
  opacity: 0.7;
  font-size: 11.33px;
  color: #333333;
  margin-left: 8px;
}

.tree-info .operation_box span {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
}

.tree-info .operation_box img {
  width: 13px;
  height: 13px;
  margin-right: 8px;
}

.footer-tips {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
  margin: 30px 0 50px;
  text-align: center;
}

//心灵放松
.relax_box {
  padding: 14px 7px 7px 7px;
}

.relax_box .music_info {
  position: relative;
  width: 100%;
  height: 67px;
  color: #333333;
  font-size: 14px;
  opacity: 0.5;
  background-size: cover;
  background-image: url("~@/assets/images/home/music_bg.png");
}

.relax_box .music_desc {
  position: absolute;
  top: 17px;
  left: 77px;
}

.relax_box .music_info .text {
  font-size: 12px;
  opacity: 0.4;
}

.relax_box .music_info .pause-img {
  position: absolute;
  right: 17px;
  top: 27px;
  width: 18px;
  height: 18px;
}

//分类
.sort_info {
  margin-top: 10px;
}

.item-sort {
  width: 160px;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  padding-bottom: 12px;
}

.vertical-sort {
  padding: 3.33px;
}

.sort-picture {
  width: 100%;
  height: 90px;
  background-color: red;
}

.vertical-picture {
  width: 56.67px;
  height: 81.33px;
}

.item-tit {
  margin-bottom: 10px;
  font-size: 14px;
  color: #333333;
}

.item_pad {
  padding: 0 10px;
}

.sort-tit {
  font-size: 12px;
  color: #333333;
  opacity: 0.5;
}

.right-arrow {
  width: 10px;
  height: 10px;
  margin-left: 6px;
}

// 测评
.evaluation_box {
  padding: 0 10px;
  border-bottom: 1px solid #dddddd;
  color: red;
}

.evaluation_box .item-evaluation {
  padding: 10px 0;
  border-bottom: 1px solid #dddddd;
}

.evaluation_box .item-evaluation:last-child {
  border-bottom: none;
}

.evaluation_box .left_box {
  display: flex;
  align-items: center;
}

.evaluation_box .left_box .cover_img {
  width: 53.33px;
  height: 53.33px;
  border-radius: 7px;
  margin-right: 13px;
  background-color: red;
}

.evaluation_box .left_box .left_title {
  color: #333333;
  font-size: 14.67px;

  margin-bottom: 14.67px;
}

.evaluation_box .left_box .hot_img {
  width: 8.33px;
  height: 10.67px;
  margin-right: 4.48px;
  background-color: red;
}

.evaluation_box .left_box .num {
  font-size: 12px;
  color: #ff9500;
}

.evaluation_box .arrow_img {
  width: 8px;
  height: 14px;
  background-color: red;
}

.evaluate_pop {
  position: relative;
  padding-bottom: 50px; /* 为按钮留出空间 */
  width: 270px;
  height: 336.67px;
  background: #ffffff;
  border-radius: 13.33px;
}
.evaluate_pop .pop_bg {
  position: relative;
  width: 100%;
  height: 200px;
}
.evaluate_pop .txt {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 23.33px;
  font-weight: bold;
  color: #333333;
  letter-spacing: 1.17px;
}

.evaluate_pop .tips {
  font-size: 14px;
  color: #888888;
  line-height: 24px;
  text-align: center;
  padding: 0 15px;
}
.evaluate_pop .btn {
  width: 166.67px;
  height: 36.67px;
  line-height: 36.67px;
  text-align: center;
  color: #ffffff;
  font-size: 15.33px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 18.33px;
  margin: 26px auto 0 auto;
}
.evaluate_pop .close_img {
  position: absolute;
  bottom: -60px; /* 调整这个值使按钮出现在弹窗下方 */
  left: 50%;
  transform: translateX(-50%);
  width: 33.33px;
  height: 33.33px;
}
.van-popup {
  overflow: visible !important;
}
</style>
